<template>
  <ADialog v-model="isVisible" title="选择条件" width="500px" @confirm="onConfirm">
    <div class="form-option">
      <p>请选择用来区分审批流程条件字段，已选择{{ checkList.length }}个</p>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in optionList" :key="item.id" :label="item.id">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </ADialog>
</template>

<script setup lang="ts">
const emits = defineEmits(['updateOption'])
const props = defineProps({
  arr: {
    type: Array as () => any,
    default: () => {
      return []
    }
  }
})
const isVisible = ref<boolean>(false)
const checkList = ref<any[]>([])
const optionList = ref<any[]>([])
// 确认选择
const onConfirm = () => {
  isVisible.value = false
  const arr = optionList.value.filter((el: any) => {
    return checkList.value.find((id: string) => el.id === id)
  })
  emits('updateOption', arr)
}
onMounted(() => {
  optionList.value = props.arr.map((el: any) => {
    if (el.formType === 'DateRangeSelect') {
      return {
        id: el.id,
        type: 1,
        key: el.config.key + '-long',
        label: el.config.title + '时长',
        unit: el.config.dateType == 0 ? '天' : '时',
        numberType: 1, // 条件值类型 1大于 2大于等于 3小于 4小于等于 5等于 6介于两数之间
        value: '',
        minValue: '',
        maxValue: ''
      }
    }
    if (el.formType === 'SingleSelect' || el.formType === 'MultipleSelect') {
      return {
        id: el.id,
        type: 2,
        key: el.config.key,
        label: el.config.title,
        values: [],
        options: el.config.options
      }
    }
    if (el.formType === 'NumberInput') {
      return {
        id: el.id,
        type: 1,
        key: el.config.key,
        label: el.config.title,
        numberType: 1,
        value: '',
        minValue: '',
        maxValue: '',
        unit: el.config.unit
      }
    }
    return el
  })
  console.log(optionList.value)
})
defineExpose({
  open: (arr: any[]) => {
    checkList.value = arr.map((el) => el.id) || []
    isVisible.value = true
  }
})
</script>
